import React, { cloneElement } from 'react'

import { ListWrapper, ListBody } from './styledList'

export default function List({
  title,
  data,
  renderItem,
  direction
}) {

  return (
    <ListWrapper>
      <h1>{title}</h1>
      <ListBody
        direction={direction}
      >
        <div>
          {
            data.map(item => {
              return (
                cloneElement(renderItem(item), {
                  key: item.id
                })
              )
            })
          }
        </div>
      </ListBody>
    </ListWrapper>
  )
}
